<template>
  <div class="shop_list">
    <header>
      <van-icon name="arrow-left" class="scan" size=".48rem" @click="goBack"/>
      <form action="/" class="search">
        <van-search placeholder="请输入搜索商品关键词" v-model="searchValue" shape="round" class="search" @keypress="searchKeyWord"/>
      </form>
      <van-icon name="ellipsis" class="code" size=".48rem" info="99"/>
    </header>
    <notice></notice>
    <van-tabs v-model="active"
      class="shop_type"
      title-active-color="#FF2A1F"
      title-inactive-color="#333333"
      :animated="true"
      :scrollspy="true"
      :swipeable="true"
      @change="changeTab"
      :swipe-threshold="7"
    >
      <van-tab :title="item.name" class="type_tab" v-for="(item, index) in shopType" :key="index">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :immediate-check="false"
        >
          <van-image :src="ad.cover">
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
            <template v-slot:error></template>
          </van-image>
          <div class="shop_item" v-for="(item, index) in shopList" :key="index">
            <div class="shop_info">
              <van-image
                width=".8rem"
                height=".8rem"
                fit="cover"
                :src="item.logo"
                :radius="$remToPx(0.08)"
                class="shop_cover"
              />
              <div class="shop_title">
                <p class="van-ellipsis">{{item.name}}</p>
                <span>{{item.focus_user_count}}关注</span>
              </div>
              <div class="in_shop" @click="toShopHome(item.user_id)">进店</div>
            </div>
            <div class="shop_product">
              <div class="product_item" v-for="(it, index) in item.product" :key="index" @click.stop="toDetail(it.id)">
                <van-image :src="it.image" width="2.18rem" height="2.18rem" :radius="$remToPx(0.16)">
                  <template v-slot:loading>
                    <van-loading type="spinner" size="20" />
                  </template>
                  <template v-slot:error></template>
                </van-image>
                <div class="product_price">￥{{it.price}}</div>
              </div>
            </div>
          </div>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data () {
    return {
      searchValue: '',
      active: 0,
      loading: false,
      finished: false,
      shopList: [],
      ad: '',
      shopType: [],
      page: 1,
      last_page: 100
    }
  },
  methods: {
    searchKeyWord (event) {
      if (event.keyCode === 13) {
        event.preventDefault()
        this.$router.push({ name: 'allgoods', params: { key: this.searchValue } })
      }
    },
    onLoad () {
      if (this.page >= this.last_page) {
        this.loading = false
        this.finished = true
        return false
      }
      this.loading = true
      this.finished = false
      setTimeout(_ => {
        this.page++
        this.$axios.get('/api/merchant/list', {
          params: {
            category_id: this.shopType[this.active].id === 0 ? '' : this.shopType[this.active].id,
            page: this.page
          }
        }).then(res => {
          if (res.status === 200) {
            if (res.data.data.length > 0) {
              this.shopList.push(res.data.data)
            }
          }
          this.finished = true
          this.loading = false
        })
      })
    },
    getShopList (id) {
      this.$axios.get('/api/merchant/list', {
        params: {
          category_id: id === 0 ? '' : id,
          page: this.page
        }
      }).then(res => {
        if (res.status === 200) {
          this.shopList = res.data.data
          this.ad = res.data.ad
        }
      })
    },
    getShopType () {
      this.$axios.get('/api/merchant_category').then(res => {
        if (res.status === 200) {
          this.shopType = res.data
          this.getShopList(res.data[0].id)
        }
      })
    },
    changeTab (name) {
      this.loading = false
      this.finished = false
      this.page = 1
      this.getShopList(this.shopType[name].id)
    },
    toShopHome (id) {
      this.$router.push(`/shophome/${id}`)
    },
    goBack () {
      if (this.$store.state.pl === 'H5') {
        this.$router.go(-1)
      } else if (this.$store.state.pl === 'ANDROID' || this.$route.query.from === 'app') {
        AndroidJsBridge.finish()
      } else if (this.$store.state.pl === 'IOS' || this.$route.query.from === 'app') {
        window.iosCallHandler('popVC')
      }
    },
    toDetail (id) {
      this.$router.push(`/productDetail/${id}`)
    }
  },
  created () {
    this.getShopType()
  }
}
</script>

<style lang="scss">
.shop_list{
  background: #F6F6F6;
  height: 100%;
  header{
    padding: .14rem .32rem;
    font-size: .24rem;
    color: #666666;
    background: #E0261B;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .scan, .code{
      width: .44rem;
      height: .44rem;
      color: #ffffff;
    }
    .search{
      width: 5.36rem;
      height: .6rem;
      padding: 0;
      background: #E0261B !important;
      &>*{
        // background: #ffffff;
        width: 100%;
        border-radius: .36rem;
        height: .6rem;
      }
      .van-field__body{
        width: 100%;
      }
    }
    .van-cell__value--alone{
      display: flex;
    }
  }
  .shop_type{
    height: calc(100% - .48rem - .88rem - .88rem);
    .van-tabs__content{
      height: 100%;
      overflow: auto;
      .van-list{
        padding: 0 .16rem;
        &>.van-image{
          width: 100%;
          height: 1.78rem;
          margin-top: .16rem;
        }
        .van-image__loading{
          width: 100%;
        }
        .van-loading{
          margin: 0 auto;
        }
        .shop_item{
          margin-bottom: .16rem;
          padding: .2rem .16rem .32rem;
          background: #ffffff;
          border-radius: .16rem;
          .shop_info{
            display: flex;
            .shop_cover{
              flex: 0 1 auto;
            }
            .shop_title{
              flex: 1;
              display: flex;
              flex-direction: column;
              color: #333333;
              justify-content: space-between;
              margin-left: .16rem;
              margin-right: .16rem;
              p{
                font-weight: 500;
                font-size: .32rem;
              }
              span{
                font-size: .24rem;
              }
            }
            .in_shop{
              flex: 0 1 auto;
              width: 1.12rem;
              height: .48rem;
              border-radius: .24rem;
              color: #ff2a1f;
              font-size: .2rem;
              border: .02rem solid #ff2a1f;
              line-height: .48rem;
              text-align: center;
            }
          }
          .shop_product{
            display: flex;
            margin-top: .16rem;
            .product_item{
              position: relative;
              height: 2.18rem;
              margin-right: .16rem;
              .product_price{
                position: absolute;
                width: 1.12rem;
                height: .48rem;
                background: #1d1e1e;
                border-radius: .24rem;
                color: #ffffff;
                font-size: .2rem;
                line-height: .48rem;
                text-align: center;
                left: 50%;
                top: 1.54rem;
                transform: translateX(-50%);
              }
            }
            .product_item:last-child{
              margin-right: unset;
            }
          }
        }
        .van-list__loading{
          background: #f6f6f6;
        }
      }
    }
  }
}
</style>
